<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多种加密工具</title>
    <script src="https://cdn.jsdelivr.net/npm/sm-crypto@0.3.2/dist/sm-crypto.min.js"></script>
    <script src="js/crypto-js.min.js"></script>
    <script src="js/sm2.js"></script>
    <script src="js/sm3.js"></script>
    <script src="js/sm4.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        textarea, input, select, button {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        textarea {
            height: 100px;
            resize: vertical;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        .result-area {
            margin-top: 10px;
        }
        .key-section {
            margin-top: 10px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 4px;
        }
        .hidden {
            display: none;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .copy-btn {
            background-color: #2196F3;
            margin-left: 10px;
        }
        .copy-btn:hover {
            background-color: #0b7dda;
        }
    </style>
</head>
<body>
    <h1>多种加密工具</h1>
    <div class="container">
        <div class="input-group">
            <label for="inputText">输入文本:</label>
            <textarea id="inputText" placeholder="请输入要加密的文本..."></textarea>
        </div>

        <div class="input-group">
            <label for="encryptionType">加密方式:</label>
            <select id="encryptionType">
                <option value="md5">MD5</option>
                <option value="sm3">SM3</option>
                <option value="sha256">SHA-256</option>
                <option value="aes">AES</option>
                <option value="sm2">SM2</option>
                <option value="sm4">SM4</option>
            </select>
        </div>

        <div id="keySection" class="key-section hidden">
            <div class="input-group">
                <label for="keyInput">密钥:</label>
                <div style="display: flex;">
                    <input type="text" id="keyInput" style="flex: 1;">
                    <button id="generateKeyBtn" class="copy-btn">生成密钥</button>
                </div>
            </div>
            <div id="sm2KeyPairSection" class="hidden">
                <div class="input-group">
                    <label>公钥:</label>
                    <textarea id="sm2PublicKey" readonly></textarea>
                </div>
                <div class="input-group">
                    <label>私钥:</label>
                    <textarea id="sm2PrivateKey" readonly></textarea>
                </div>
            </div>
        </div>

        <button id="encryptBtn">加密</button>

        <div class="input-group result-area">
            <label for="outputText">加密结果:</label>
            <div style="display: flex;">
                <textarea id="outputText" readonly></textarea>
            </div>
            <button id="copyBtn" class="copy-btn">复制结果</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const encryptionType = document.getElementById('encryptionType');
            const keySection = document.getElementById('keySection');
            const sm2KeyPairSection = document.getElementById('sm2KeyPairSection');
            const keyInput = document.getElementById('keyInput');
            const generateKeyBtn = document.getElementById('generateKeyBtn');
            const encryptBtn = document.getElementById('encryptBtn');
            const inputText = document.getElementById('inputText');
            const outputText = document.getElementById('outputText');
            const copyBtn = document.getElementById('copyBtn');
            const sm2PublicKey = document.getElementById('sm2PublicKey');
            const sm2PrivateKey = document.getElementById('sm2PrivateKey');

            // 切换加密方式时显示/隐藏密钥输入区域
            encryptionType.addEventListener('change', function() {
                const type = this.value;
                
                if (type === 'md5' || type === 'sm3' || type === 'sha256') {
                    keySection.classList.add('hidden');
                } else {
                    keySection.classList.remove('hidden');
                    
                    if (type === 'sm2') {
                        sm2KeyPairSection.classList.remove('hidden');
                        keyInput.placeholder = "SM2公钥(加密)/私钥(解密)";
                    } else {
                        sm2KeyPairSection.classList.add('hidden');
                        if (type === 'aes') {
                            keyInput.placeholder = "输入AES密钥(16/24/32字节)";
                        } else if (type === 'sm4') {
                            keyInput.placeholder = "输入SM4密钥(16字节)";
                        }
                    }
                }
            });

            // 生成密钥按钮点击事件
            generateKeyBtn.addEventListener('click', function() {
                const type = encryptionType.value;
                
                if (type === 'aes') {
                    // 生成随机AES密钥(16,24,32字节)
                    const keyLength = [16, 24, 32][Math.floor(Math.random() * 3)];
                    let key = '';
                    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                    
                    for (let i = 0; i < keyLength; i++) {
                        key += chars.charAt(Math.floor(Math.random() * chars.length));
                    }
                    
                    keyInput.value = key;
                } else if (type === 'sm4') {
                    // 生成随机SM4密钥(16字节)
                    let key = '';
                    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                    
                    for (let i = 0; i < 16; i++) {
                        key += chars.charAt(Math.floor(Math.random() * chars.length));
                    }
                    
                    keyInput.value = key;
                } else if (type === 'sm2') {
                    // 生成SM2密钥对
                    const keypair = smCrypto.sm2.generateKeyPairHex();
                    sm2PublicKey.value = keypair.publicKey;
                    sm2PrivateKey.value = keypair.privateKey;
                    keyInput.value = keypair.publicKey; // 默认使用公钥加密
                }
            });

            // 加密按钮点击事件
            encryptBtn.addEventListener('click', function() {
                const type = encryptionType.value;
                const text = inputText.value.trim();
                
                if (!text) {
                    alert('请输入要加密的文本!');
                    return;
                }
                
                try {
                    let result = '';
                    
                    switch (type) {
                        case 'md5':
                            result = CryptoJS.MD5(text).toString();
                            break;
                        case 'sm3':
                            result = smCrypto.sm3(text);
                            break;
                        case 'sha256':
                            result = CryptoJS.SHA256(text).toString();
                            break;
                        case 'aes':
                            const aesKey = keyInput.value.trim();
                            if (!aesKey) {
                                alert('请输入AES密钥!');
                                return;
                            }
                            result = CryptoJS.AES.encrypt(text, aesKey).toString();
                            break;
                        case 'sm2':
                            const sm2Key = keyInput.value.trim();
                            if (!sm2Key) {
                                alert('请输入SM2公钥(加密)或私钥(解密)!');
                                return;
                            }
                            // SM2加密
                            result = smCrypto.sm2.doEncrypt(text, sm2Key);
                            break;
                        case 'sm4':
                            const sm4Key = keyInput.value.trim();
                            if (!sm4Key) {
                                alert('请输入SM4密钥!');
                                return;
                            }
                            if (sm4Key.length !== 16) {
                                alert('SM4密钥必须是16字节!');
                                return;
                            }
                            // SM4加密 (使用ECB模式)
                            result = smCrypto.sm4.encrypt(text, sm4Key);
                            break;
                        default:
                            result = '不支持的加密类型';
                    }
                    
                    outputText.value = result;
                } catch (error) {
                    outputText.value = '加密出错: ' + error.message;
                    console.error(error);
                }
            });

            // 复制结果按钮点击事件
            copyBtn.addEventListener('click', function() {
                outputText.select();
                document.execCommand('copy');
                alert('已复制到剪贴板!');
            });

            // 初始化时触发一次change事件以正确显示UI
            encryptionType.dispatchEvent(new Event('change'));
        });
    </script>
</body>
</html>